import { useAPIUtils } from "@/components/APIUtilsProvider";
import { Flex, Progress, Text } from "@mantine/core";

export default function WithwingsProgressIndicator({ progressId }) {
  const { tanstackQuery } = useAPIUtils();
  const query = tanstackQuery(`/world/${progressId}/progress`, {}, 1000);
  return (
    <>
      <Flex justify={"space-between"}>
        <Text>{query.data?.description}</Text>
        <Text>
          {`${query.data?.statusText}(${query.data?.value.toFixed(1)}%)`}
        </Text>
      </Flex>

      <Progress
        transitionDuration={300}
        size={"xl"}
        animated={query.data?.value < 100}
        value={query.data?.value}
      />
    </>
  );
}
